<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/base1.css">
  <link rel="stylesheet" href="./css/list.css">
</head>
<body>

  <div class="header container">商品列表页</div>

  <div class="box container">
    <div class="category">
      <div class="title">分类信息</div>
      <ul class="clearfix">
        <!-- JS 渲染 -->
      </ul>
    </div>
    <div class="filter">
      <div class="title">
        筛选条件
      </div>
      <ul>
        <li class="filterItem" data-type="hot">热销</li>
        <li class="filterItem" data-type="sale">折扣</li>
      </ul>
    </div>
    <div class="search">
      <div class="title">搜索</div>
      <input type="text">
      <button class="searchBtn">搜索</button>
    </div>
    <div class="sortBox">
      <div class="title">
        排序
      </div>
      <ul>
        <li class="sortItem" data-type="id" data-method="ASC">综合
          <span class="active"></span>
          <span></span>
        </li>
        <li class="sortItem" data-type="sale" data-method="ASC">折扣
          <span></span>
          <span></span>
        </li>
        <li class="sortItem" data-type="price" data-method="ASC">价格
          <span></span>
          <span></span>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <span class="pageInfo"> 1 / 100 </span>
      <select>
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>
        <option value="24">24</option>
      </select>
      <div class="prev">&lt;</div>
      <div class="next">&gt;</div>
    </div>
  </div>

  <ul class="list container clearFix">
    <li>
      <div class="show">
        <img src="" alt="">
      </div>
      <div class="desc">
        <p class="info">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</p>
        <p class="price">
          <span class="current">￥ 100.00</span>
          <span class="old">￥ 130.00</span>
        </p>
        <button>直接购买</button>
      </div>
      <span class="tip active">HOT</span>
      <span class="tip active">SALE</span>
    </li>
  </ul>

  <script src="./utils.js"></script>
  <script src="./js/list.js"></script>

</body>
</html>
